<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php /** @var $this \Magento\Backend\Block\Widget\Form\Renderer\Fieldset */ ?>

<div id="js-file-uploader" class="uploader">
</div>

<div class="no-display" id="js-file-uploader-template">
    <div id="{{id}}" class="file-row">
        <span class="file-info">{{name}} ({{size}})</span>
        <div class="progressbar-container">
            <div class="progressbar upload-progress" style="width: 0%;"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="no-display" id="js-uploaded-file-template">
    <input class="up" type="button" value="">
    <input class="down" type="button" value="">
    <input type="hidden" name="js_order[${id}]" value="1">

    <div class="js-file">
        ${name}
        <div class="remove-js">
            <input type="checkbox" id="remove_js_files_${id}" name="js_removed_files[]" value="${id}" />
            <label for="remove_js_files_${id}"><?php echo __('Remove') ?></label>
        </div>
    </div>

    <input type="hidden" name="js_uploaded_files[]" value="${temporary}" />
</div>


<ul id="js-files-container" class="js-files-container ui-sortable" ></ul>

<script type="text/javascript">
require([
    "jquery",
    "jquery/ui",
    "Magento_Theme/js/custom-js-list"
], function(jQuery){

jQuery(function($) {
    $('.ui-sortable').sortable();
    $('.ui-sortable').disableSelection();

    $('#js-files-container').themeJsList({
        templateId : '#js-uploaded-file-template',
        refreshFileListEvent : 'refreshJsList',
        prefixItemId : 'js-file-'
    });
    $('body').trigger(
        'refreshJsList',
        {jsList: <?php echo $this->helper('Magento\Core\Helper\Data')->jsonEncode($this->getJsFiles()) ?>}
    );
});

});
</script>
